<template>
  <div v-loading="isLoading > 0" class="page-container">
    <page-tools>
      <template #left>
        <el-form
          ref="formSearch"
          size="mini"
          :inline="true"
          :model="formSearch"
          class="demo-form-inline"
        >
          <el-form-item label="用户id">
            <el-input v-model="formSearch.user_id" style="width: 100px;" />
          </el-form-item>
          <el-form-item label="订单号">
            <el-input v-model="formSearch.trade_no" style="width: 120px;" />
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker
              v-model="formSearch.date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 230px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.prevent="onResetForm">清空</el-button>
            <el-button type="primary" @click.prevent="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <!-- <template #right>
        <el-button type="primary" size="mini" @click="addOrderRecharge">新增城市</el-button>
      </template>-->
    </page-tools>

    <el-card style="margin-top: 10px;">
      <el-table :data="orderRechargeList" border>
        <el-table-column
          label="序号"
          type="index"
          :index="indexMethod"
          fixed="left"
          width="60"
          sortable
        />
        <el-table-column label="订单号" prop="trade_no" fixed="left" width="100" />
        <el-table-column label="用户信息" width="110" sortable>
          <template #default="{ row }">
            <router-link class="text-link" :to="'/user/list?user_id=' + row.user_id">查看</router-link>
          </template>
        </el-table-column>
        <el-table-column label="实际支付金额" prop="pay_money" width="100" />
        <el-table-column label="充值金额" prop="recharge_money" width="100" />

        <el-table-column label="充值时间" width="110" sortable>
          <template #default="{ row }">{{ row.create_time | formatTime }}</template>
        </el-table-column>

        <el-table-column label="操作" fixed="right">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="editOrderRecharge(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div style="height: 60px; margin-top: 10px">
        <el-pagination
          :current-page="page_num"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <add-edit ref="AddEditDialog" @refresh="getOrderRechargeList" />
  </div>
</template>

<script>
const formSearch = {
  user_id: '',
  trade_no: '',
  date: '',
  page_num: 1,
  page_size: 10
}
import { getOrderRechargeList } from '@/api/order_recharge'
import AddEdit from './components/AddEdit.vue'
export default {
  name: 'OrderRechargeList',
  components: {
    AddEdit
  },
  data() {
    return {
      isLoading: 0,
      formSearch: {},
      orderRechargeList: [],
      page_num: 1,
      page_size: 10,
      total: 0
    }
  },
  computed: {},
  watch: {},
  created() {
    this.initFormSearch()
    this.getOrderRechargeList()
  },
  mounted() {},
  methods: {
    initFormSearch() {
      this.formSearch = Object.assign({}, formSearch, this.$route.query)
      this.formSearch.page_num = Number.parseInt(this.formSearch.page_num)
      this.formSearch.page_size = Number.parseInt(this.formSearch.page_size)
    },
    changeQuery() {
      // 获取当前的query参数
      const currentQuery = this.$route.query

      // 将新的筛选条件合并到query参数中
      const newQuery = Object.assign({}, currentQuery, this.formSearch)

      // 使用Vue Router的replace方法更新URL
      this.$router.replace({ query: newQuery })
    },
    onResetForm() {
      this.formSearch = { ...formSearch }
      this.changeQuery()
      this.$refs.formSearch.resetFields()
      this.getOrderGoodsList()
    },
    onSearch() {
      this.formSearch.page_num = 1
      this.formSearch.page_size = 10
      this.changeQuery()
      this.getOrderGoodsList()
    },
    editOrderRecharge(row) {
      this.$refs.AddEditDialog.open(row)
    },
    async getOrderRechargeList() {
      try {
        this.isLoading++
        const { user_id, trade_no, date, page_num, page_size } = this.formSearch
        const res = await getOrderRechargeList({
          user_id: user_id ? Number.parseInt(user_id) : null,
          trade_no: trade_no || null,
          start_time: date[0] ? (new Date(date[0])).getTime() : null,
          end_time: date[1] ? (new Date(date[1])).getTime() : null,
          page_num: Number.parseInt(page_num),
          page_size: Number.parseInt(page_size)
        })
        this.total = res.total
        this.orderRechargeList = res.list
      } finally {
        this.isLoading--
      }
    },
    indexMethod(index) {
      return index + 1 + (this.formSearch.page_num - 1) * this.formSearch.page_size
    },
    handleSizeChange(val) {
      this.page_num = 1
      this.page_size = val
      this.getOrderRechargeList()
    },
    handleCurrentChange(val) {
      this.page_num = val
      this.getOrderRechargeList()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
